<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:400px;height:100px;border: solid 1px black;position: relative;}
        .box p{margin: 0;height:20px;width:0px;background: blue;color: white;text-align: center;line-height:20px;font-size: 14px;position: absolute;top: 40px;}
    </style>
</head>
<body>
    <div class="box">
        <p></p>
    </div>
</body>
<script>

    // 不断增加p的宽度，同时根据p的宽度计算所占容器宽度的百分比

    // 1. 获取元素
    var box = document.querySelector(".box");
    var p = document.querySelector(".box p");

    // 2. 获取进度条的目标值
    var target = parseInt(getStyle(box, "width"));
    // 3. 获取进度条的初始值
    var origin = parseInt(getStyle(p, "width"));
    // 4. 设置进度条的步长
    var speed = 2;
    var t = null;
    document.onclick = function(){
        clearInterval(t);
        // 5. 开启计时器
        t = setInterval(function(){
            // 6. 判断剩下距离，是否小于一步
            if(target - origin < speed){
                // 7. 停止
                clearInterval(t);
                // 强行设置到终点
                p.style.width = target + "px";
                p.innerText = "100%";
            }else{
                // 8. 向前走
                origin += speed;
                p.style.width = origin + "px";
                // 9. 计算百分比
                p.innerText = (origin / target * 100).toFixed(0) + "%";
            }
        }, 30);
    }



    
    
    function getStyle(ele, attr){
        if(ele.currentStyle){
            return ele.currentStyle[attr];
        }else{
            return getComputedStyle(ele)[attr];
        }
    }
</script>
</html>